<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-date"></i> 首页</el-breadcrumb-item>
                <el-breadcrumb-item>企业热点</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-form label-width="100px" class="demo-ruleForm">
            <el-form-item label="图片">
                <el-upload
                    class="upload-demo"
                    :action="uploadUrl"
                    :on-change="handleChange"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :on-success="handleSuccess"
                    :file-list="myFileList"
                    :before-upload="handleBefore"
                    name="image"
                    list-type="picture-card">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
            </el-form-item>
        </el-form>

        <el-dialog v-model="imageShow" size="tiny">
            <img width="100%" :src="dialogImageUrl" alt="图片预览">
        </el-dialog>

        <el-dialog
            title="提示"
            :visible.sync="confirmDialog"
            size="tiny">
            <span>图片删除后不可恢复，确定删除该图片？</span>
            <span slot="footer" class="dialog-footer">
            <el-button @click="confirmDialog = false">取 消</el-button>
            <el-button type="primary" @click="confirmDelete">确 定</el-button>
          </span>
        </el-dialog>
    </div>
</template>
<script>
    import {Loading} from 'element-ui'
    import common from '../../../common/constant.js'
    export default {
        data: function () {
            return {
                uploadUrl:common.homeUrl + '/upload',
                ruleForm:[],
                myFileList:[],
                attachment: {
                    id: 0,
                    type: 0,
                    relation: 0
                },
                pageInfo:{
                    pageNum:1,
                    pageSize:10,
                    total:0
                },
                imageShow: false,
                dialogImageUrl:'',
                confirmDialog: false,
                removeFile: []
            }
        },
        created(){
            this.attachment.type = this.$route.query.attachmentType
            this.attachment.relation = this.$route.query.relation
            this.queryFileList(this.$route.query.attachmentType,this.$route.query.relation)
        },
        methods: {
            handleBefore(file) {
                // 限制图片大小不超过500KB
                const isJPG = file.type === 'image/jpeg'
                const isPNG = file.type === 'image/png'
                if (!isJPG&&!isPNG) {
                    this.$notify.error({
                        title: '警告',
                        message: '只支持上传png/jpg图片！',
                        duration: 0
                    });
                    return false
                }
                let fileSize = file.size;
                if(fileSize > 512000) {
                    this.$notify.error({
                        title: '警告',
                        message: '图片大小不能超过500KB，当前图片大小:' + Math.round(fileSize/1024) + 'KB',
                        duration: 0
                    });
                    return false
                }
                return true
            },
            handleRemove(file, fileList) {
                // fileList.push(file)
                this.removeFile=file
                this.confirmDialog=true
            },
            confirmDelete(){
                // 执行删除操作
                console.log(this.removeFile)
                this.confirmDialog=false
                this.removeFile=null
            },
            handlePreview(file) {
                this.dialogImageUrl = file.url
                this.imageShow=true
            },
            handleSuccess(response, file, fileList){
                if (response.flag === common.respons.seccuss) {
                    this.saveAttachment(response.data)
                    this.myFileList.push(file)
                }else{
                    this.message_error('上传图片失败！')
                }
            },
            handleError(err, file, fileList) {
                console.log(err,file,fileList)
            },
            handleChange(file, fileList) {

            },
            saveAttachment(fileName){
                let self = this
                let loadingInstance = Loading.service({
                    fullscreen: true,
                    text: "操作中......"
                })
                self.$http.post(common.homeUrl + '/attachment/save', {
                    filename: fileName,
                    filepath: common.imageUrl,
                    type: self.attachment.type,
                    relation: self.attachment.relation
                })
                    .then((response) => {
                        let responseData = response.data
                        if (responseData.flag === common.respons.seccuss) {
                            this.message_ok('上传图片成功！')

                        } else {
                            this.$notify.error({
                                title: '错误',
                                message: '上传图片失败！',
                                duration: 6000
                            })
                        }
                        loadingInstance.close()
                    })
                    .catch(function (response) {
                        loadingInstance.close()
                        this.message_error()
                        console.log(response)
                    })
            },
            queryFileList(attachmentType,relation) {
                let self = this
                let loadingInstance = Loading.service({
                    fullscreen: true,
                    text: "操作中......"
                })
                self.$http.post(common.homeUrl + '/attachment', {
                    id: 0,
                    type: attachmentType,
                    relation: relation,
                    pageNum:self.pageInfo.pageNum,
                    pageSize:self.pageInfo.pageSize
                })
                    .then((response) => {
                        let responseData = response.data
                        if (responseData.flag === common.respons.seccuss) {
                            let list=responseData.pageData.list
                            for (var i = 0; i < list.length; i++) {
                                let image={'name':list[i].filename,'url':common.imageUrl+list[i].filename}
                                self.myFileList.push(image)
                            }
                        } else {
                            this.$notify.error({
                                title: '错误',
                                message: '查询失败！',
                                duration: 6000
                            })
                        }
                        loadingInstance.close()
                    })
                    .catch(function (response) {
                        loadingInstance.close()
                        this.message_error()
                        console.log(response)
                    })
            },
            message_error(message) {
                if(message===null){
                    this.$notify.error({
                        title: '错误',
                        message: '操作失败'
                    });
                }else{
                    this.$notify.error({
                        title: '错误',
                        message:message
                    });
                }
            },
            message_ok(message) {
                if (message===null){
                    this.$notify({
                        title: '成功',
                        message: '操作成功',
                        type: 'success'
                    });
                }else{
                    this.$notify({
                        title: '成功',
                        message: message,
                        type: 'success'
                    });
                }

            }
        }
    }
</script>
